// 加载模块
let form = layui.form
let layer = layui.layer;
// 首先需要获取下拉的标题数据渲染到下拉表单
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        let arr = []
        res.data.forEach(item => {
            arr.push(`
            <option value="${item.id}">${item.name}</option>
            `)
        })
        $('select[name=cate_id]').append(arr.join(''))
        form.render()
    }
})
// 调用插件编辑器
initEditor()
// 1. 初始化图片裁剪器
let image = $('#image')

// 2. 裁剪选项
let option = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}

// 3. 初始化裁剪区域
image.cropper(option)

// 点击上传图片时候触发按钮上传
$('#cover').on('click', function () {
    $('#files').trigger('click')
})
// 给文件域添加事件
$('#files').on('change', function () {
    let files = this.files
    // console.dir(this);

    let url = URL.createObjectURL(files[0])
    image.cropper('destroy').attr('src', url).cropper(option)



})

// 提交事件
$('.layui-form').on('submit', function (e) {
    e.preventDefault()
    // 获取表单的数据
    let fd = new FormData(this)
    // 设置表中的内容
    fd.set('content', tinyMCE.activeEditor.getContent())
    // 设置图
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 })
    // 转成二进制图片
    canvas.toBlob(blob => {
        fd.append('cover_img', blob)
        // fd.forEach((item, value) => {
        //     console.log(value, item);
        // })
        $.ajax({
            type: 'POST',
            url: '/my/article/add',
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res);
                if (res.status == 0) {
                    layer.msg(res.message, { time: 1000 }, function () {
                        location.href = './list.html'

                    })

                } else {
                    layer.msg(res.message)
                }

            }
        })
    })



})